<template>
	<view class="container">
		<view class="header">
			<swiper class="header__swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<!-- 如果轮播图多张 -->
				<block v-if="hasMany">
					<swiper-item class="swiper-item" v-for="(item,index) in goodsInfo.thumb_url" :key="index">
						<image :src="item"></image>
					</swiper-item>
				</block>
				<!-- 如果轮播图只有1张 -->
				<block v-else>
					<swiper-item>
						<view class="swiper-item">
							<image :src="goodsInfo.thumb"></image>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!-- 商品详情 -->
		<view class="goods">
			<view class="wrap">
				<view class="goods__title">{{goodsInfo.title}}</view>
				<view class="goods__info">
					<view class="freight">运费：{{goodsInfo.dispatch_price}}元</view>
					<view class="sales">已售：{{goodsInfo.virtual_sales}}</view>
				</view>
				<view v-if="goodsInfo.x_price" class="goods__price">{{goodsInfo.x_price}}+{{goodsInfo.x_str}}</view>
				<view v-else class="goods__price">¥{{goodsInfo.price}}</view>
			</view>
		</view>
		
		<view class="content rich-box">
			<view class="content__title">商品详情</view>
			<u-parse class="full-image" :html="goodsInfo.content"></u-parse>
		</view>
		<!-- 底部 -->
		<view class="footer">
			<view class="footer__home">
				<image src="../../../static/images/personal/home.png"></image>
				<view class="icon-text" @click="toHome">首页</view>
			</view>
			<view class="footer__buy" @click="toPay">立刻购买</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState 
	} from 'vuex';
	// #ifdef H5
	import h5share from '@/config/h5-share.js'
	// #endif

	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				goodsInfo: [], // 商品详情列表		
				isGroupBuy: false, // 是否为拼团
				apiUrl: '',			// 接口url
				hasMany: false
			}
		},
		onLoad(options) {
			if (options.goodsId) {
				this.goodsId = options.goodsId
				this.isGroupBuy = false
			}
		},
		onShow() {
			// 获取商品详情
			this.getGoodsDetail();
		},
		computed: {
			...mapState(['AuthToken', 'userInfo']),
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				return 48;
				// #endif
				// #ifdef MP
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				return height;
				// #endif
			}
		},
		methods: {
			// 获取商品详情
			getGoodsDetail() {
				if (!this.isGroupBuy) {
					this.apiUrl = '/addons/yun_shop/api.php?route=goods.goods.mapp-goods-detail'
					let params = {
						id: this.goodsId,
						mid: this.userInfo.uid
					}
					this.$api.post(this.apiUrl, params).then(res => {
						this.goodsInfo = res.data;
						if (this.goodsInfo.thumb_url.length > 1) {
							this.hasMany = true
						} else {
							this.hasMany = false
						}
						let link = window.location.href
						// #ifdef H5
						new h5share(this.goodsInfo.thumb, this.goodsInfo.title, link)
						// #endif
						console.log(this.goodsInfo, 'hhhhhhhhhhhhhhhhhh');
					})
				}
			},
			// 去支付
			toPay () {
				console.log(this.userInfo);
				if(!this.userInfo.uid) {
					this.$store.commit('LOGIN_TIP', true);
				}
				let query = {
					mid: this.userInfo.uid,
					goods_id: this.goodsId
				};
				console.log(query);
				if (this.AuthToken) {
					this.$Router.push({
						path: "/pages/order/confirm/confirm",
						query: query
					})
				} else {
					this.$store.commit('LOGIN_TIP', true);
				}
				
			},
			// 去首页
			toHome () {
				// #ifdef APP-PLUS
				uni.switchTab({
					url: "/pages/index/index",
					fail (error) {
						console.log(error)
					}
				})
				// #endif
				// #ifdef H5
				uni.navigateTo({
					url: "/pages/index/index",
					fail (error) {
						console.log(error)
					}
				})
				// #endif
			},
		}
	}
</script>

<style lang="scss">
	@import './goods-detail.scss'
</style>
